<template>
	<div class="warrper">
		<div class="head">
			<div class="cbody">
				<h4>代理商管理平台</h4>
				<p>
					{{this.appConfig.appId}}
					<span @click="handleClose()">退出</span>
				</p>
			</div>
		</div>
		<div class="statistics">
			<div class="cbody">
				<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_1.png" alt="">
						<p>今日订单总数</p>
					</div>
					<div class="statitontext">						
						<h5>{{this.infolist.orderTotal}}</h5>
					</div>
				</div>

				<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_2.png" alt="">
							<p>今日订单总额</p>
					</div>
					<div class="statitontext">
					
						<h5>￥{{this.infolist.orderMoney||(0.00).toFixed(2)}}</h5>
					</div>
				</div>

				<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_3.png" alt="">
						<p>今日提现总额</p>
					</div>
					<div class="statitontext">
						
						<h5>￥{{this.infolist.withdrawalMoney || (0.00).toFixed(2)}}</h5>
					</div>
				</div>

				<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_4.png" alt="">
						<p>可提现余额</p>
					</div>
					<div class="statitontext">					
						<h5>￥{{(this.infolist.canWithdrawalAmount).toFixed(2)  || (0.00).toFixed(2)}}</h5>
					</div>
				</div>

				<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_4.png" alt="">
						<p>账户余额</p>
					</div>
					<div class="statitontext">					
						<h5>￥{{(this.infolist.accountBalance).toFixed(2)  || (0.00).toFixed(2)}}</h5>
					</div>
				</div>
				<!--<div class="statiton">
					<div class="imgbox">
						<img src="../../../static/images/paly_icon_3.png" alt="">
						<p>可提现金额</p>
						
					</div>
					<div class="statitontext">						
						<h5>￥{{this.infolist.accountMoney-(this.infolist.accountMoney*this.appConfig.serviceRate).toFixed(2)  || 0}}</h5>
					</div>
					<span class="spanTips">可提现金额 = 总金额 - (总金额 * {{this.appConfig.serviceRate}}%技术服务费)</span>
				</div>-->
			</div>
		</div>
		<el-button type="primary" @click="dialogVisible = true" class="extract">提现</el-button>
		<el-dialog title="提现申请" :visible.sync="dialogVisible" width="780px" top="23vh" @open="opendialog()">
			<el-form :model="rulesForm" :rules="rules" ref="rulesForm">
				<el-form-item prop="cashNumb">
					<div class="demo-input-suffix">
						<span class="text">提现金额：</span>
						<!--element表单校验  value > 5555  必须v-model.number-->
						<el-input placeholder="请输入提现金额" clearable v-model.number="rulesForm.cashNumb"> 
						</el-input>
						<span class="tips" >最多可提现{{account}}元</span>
					</div>
				</el-form-item>
				<el-form-item prop="bankCardId">
					<div class="demo-input-suffix">
						<span class="text">提现银行卡：</span>
						<el-select v-model="rulesForm.bankCardId" clearable placeholder="请选择提现银行卡" @change="changeValue(rulesForm.bankCardId)">
							<el-option v-for="item in bankCardList" :key="item.bankCardId" :label="item.bankCardId" :value="item.bankCardId" >
								<span style="float: left">{{  item.bankCardId}}</span>
								<span style="float: left; padding: 0 10px;">{{ item.openBank}}</span>
								<span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
							</el-option>
						</el-select>

					</div>
				</el-form-item>
				<!--<div class="demo-input-suffix">
					<span class="text">实际到账金额：</span>
					<el-input v-model="cashTotal" readonly>
					</el-input>
				</div>-->
			</el-form>
			<!--<span class="cashTips">实际到账金额 = 提现金额 - 提现手续费{{this.appConfig.poundage}}元</span>-->
			<span slot="footer" class="dialog-footer"> 
					<el-button type="primary" @click="submitForm('rulesForm')">确 定</el-button>
				    <el-button @click="dialogVisible = false">取 消</el-button>		   
				</span>

		</el-dialog>
		<div class="record">
			<div class="cbody">
				<div class="record_title">
					<div :class="recordshow==1?'recorditem tra_3 activ':'recorditem tra_3'" @click="record(1)">充值记录</div>
					<div :class="recordshow==2?'recorditem tra_3 activ':'recorditem tra_3'" @click="record(2)">提现记录</div>
					<p v-show="recordshow==1">共{{this.pageInfo.totalNum}}条记录，总计金额{{this.totalAmount|| 0}}元</p>
					<p v-show="recordshow==2">共{{this.pageInfo2.totalNum}}条记录，总计金额{{this.withdrawalAmount || 0}}元</p>
				</div>
				<div class="record_centers" v-if="recordshow==1">
					<div class="selection noheight">
						<div class="timebox">
							<p class="paytime">充值时间：</p>
							<el-date-picker v-model="value1" type="date" placeholder="选择日期时间" prefix-icon="el-icon-date" value-format="yyyy-MM-dd">
							</el-date-picker>
							-
							<el-date-picker v-model="value2" type="date" placeholder="选择日期时间" prefix-icon="el-icon-date" value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>
						<div class="payuser">
							<p>充值用户：</p>
							<el-input placeholder="请输入用户名" v-model="search" clearable>
							</el-input>
						</div>
						<div class="payuser">
							<p>订单ID：</p>
							<el-input placeholder="请输入订单ID" v-model="orderSearch" clearable>
							</el-input>
						</div>
						<div class="payuser payOrderSearch">
							<p>支付单号：</p>
							<el-input placeholder="支付单号" v-model="payOrderSearch" clearable>
							</el-input>
						</div>
						<button class="inquire nomargin" @click="getsearch(1)">查询</button>
					</div>
					<div class="record_list">
						<div class="record_list_title">
							<span>订单ID</span>
							<span>支付单号</span>
							<span>用户名</span>
							<span>状态</span>
							<span>订单金额</span>
							<span>支付金额</span>
							<span>操作时间</span>
						</div>
						<div class="record_item" v-for="(item,index) in PaymentLogList" :key="index">
							<span class="item_span">{{item.outsourcingOrderId}}</span>
							<span class="item_span">{{item.paySn}}</span>
							<span class="item_span">{{item.customerName}}</span>
							<span class="item_span">{{item.paymentState}}<br><el-button  type="primary" size="mini" v-if="item.paymentState === '已付款'" @click="supplementOrder(item)">补单</el-button></span>
							<span class="item_span">￥{{item.outsourcingRechargeAmount}}</span>
							<span class="item_span">￥{{item.paymentAmount}}</span>
							<span class="item_span">{{util.formatDateTime(item.createTime)}}</span>
						</div>
					</div>
					<div class="noData" v-if="this.showNOSearchData">未找到相关记录</div>
					<div class="noData" v-if="this.noData">暂无数据</div>
					<div class="pagination" v-if="this.PaymentLogList.length > 0">
						<el-pagination background layout="prev, pager, next" :page-count="this.pageInfo.totalPages" :page-size="10" :current-page.sync="pagenunber"  @current-change="getPaymentLogList">
						</el-pagination>
					</div>
				</div>

				<div class="record_centers" v-if="recordshow==2">
					<div class="selection" >
						<div class="timebox">
							<p class="paytime">提现时间：</p>
							<el-date-picker v-model="value3" type="date" placeholder="选择日期" prefix-icon="el-icon-date" value-format="yyyy-MM-dd">
							</el-date-picker>
							-
							<el-date-picker v-model="value4" type="date" placeholder="选择日期" prefix-icon="el-icon-date" value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>
						<!-- <div class="payuser">
							<p>提现用户：</p>
							<el-input placeholder="请输入用户名" v-model="search2" clearable>
							</el-input>
						</div> -->
						<button class="inquire"  @click="getsearch(2)">查询</button>
					</div>
					<div class="record_list">
						<div class="record_list_title">
							<span class="cashRecord">持卡人</span>							
							<span class="cashRecord">卡号</span>
							<span class="cashRecord">状态</span>
							<span class="cashRecord">扣款金额</span>
							<span class="cashRecord">提现金额</span>
							<span class="cashRecord">提现时间</span>
						</div>
						<div class="record_item" v-for="(item,index) in WithdrawalLogList" :key="index">
							
							<span class="item_span">{{item.customerName}}</span>						
							<span class="item_span">{{item.bankCard}}</span>
							<span class="item_span">{{item.status}}</span>
							<span class="item_span">{{item.money}}</span>
							<span class="item_span">{{item.transferAccounts}}</span>
							<span class="item_span">{{util.formatDateTime(item.time)}}</span>
						</div>
					</div>
					<div class="noData" v-if="this.showNOSearchData">未找到相关记录</div>
					<div class="noData" v-if="this.noData">暂无数据</div>
					<div class="pagination" v-if="this.WithdrawalLogList.length > 0 ">
						<el-pagination background layout="prev, pager, next" :page-size="10" :page-count="this.pageInfo2.totalPages" :current-page.sync="pagenunber" @current-change="getWithdrawalLogList"> 
						</el-pagination>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import { mapActions, mapState } from 'vuex'
	import util from '../../common/util';
	import api from '../../api/loginApi.js'
	export default {
		data() {
			//金额验证
			var self = this
			var validateCash = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入提现金额'));					
				} else if(value < self.appConfig.withdrawalLines){
					callback(new Error('本次最少提现'+self.appConfig.withdrawalLines+'元'));
				}else  if(this.infolist.canWithdrawalAmount-this.appConfig.poundage < value ){
					callback(new Error('提现金额超过可提现总金额，请重新输入'));
				}else{
					callback();
				}
			};
	
			//银行卡验证
			var validateCard = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请选择银行卡'));
				} else {
					callback();
				}
			};
			return {
				pagenunber:1,
				dialogVisible: false,
				rulesForm: {
					bankCardId: '',
					cashNumb: '',
					toAccountMoney:'',
					openBank:'',
					name:''
				},
				withdrawalLines:'',
				showNOSearchData:false,
				noData:false,
				util:util,
				search: '',
				search2: '',
				cash: '',
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				uesrid: '',
				orderSearch:'',
				payOrderSearch:'',
				recordshow: 1,
				infolist: '',
				PaymentLogList: '',
				pageNo:1,
				pageSize:10,
				pageNo2:1,
				pageSize2:10,
				pageInfo:[],
				pageInfo2:[],
				WithdrawalLogList:{},
				withdrawalAmount:'',
				totalAmount:'',
				// payStartTime: '',
				// payEndTime: '',
				// customerName: '',
				bankCardList: [],
				//表单验证规则
				rules: {
					bankCardId: [{
						validator: validateCard,
						trigger: 'blur'
					}],
					cashNumb: [{
						validator: validateCash,
						trigger: 'blur'
					}]
				}
			}
		},
		components: {
			util
		},
		computed: {
			...mapState([
			'appConfig',
			]),	
			// 计算属性的 getter
			cashTotal: function() {
				// `this` 指向 vm 实例
				var result = ''
				if(this.rulesForm.cashNumb == ''){
						result= ''
					}else{
						result = this.rulesForm.cashNumb
					}
				return this.cash = result
			},
			//计算可提现金额提示
			account: function() {
				var result = ''
				if(this.infolist.canWithdrawalAmount > parseInt(this.appConfig.poundage)){		
					result= this.infolist.canWithdrawalAmount - this.appConfig.poundage
				}else if(this.infolist.canWithdrawalAmount <= parseInt(this.appConfig.poundage)){
					result = 0.00
				}
				return result.toFixed(2)
			}
		},
		methods: {
			...mapActions(['setConfig']),
			
			//补单操作
			supplementOrder(item){
				const h = this.$createElement;
		        this.$msgbox({
		          title: '提示',
		          message: h('p', null, [
		            h('span', null, '是否确定补单 '),
		          ]),
		          showCancelButton: true,
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          beforeClose: (action, instance, done) => {
		            if (action === 'confirm') {
		              instance.confirmButtonLoading = true;
		              instance.confirmButtonText = '补单中...';
		              let par = {
						appId: this.appConfig.appId,
						outsourcingOrderId: item.outsourcingOrderId,
						}
						api.getCallBack(par, (res) => {
							if(res.code == 0) {
								instance.confirmButtonLoading = false;
								this.$message({
						            type: 'success',
						            message: '补单成功!'
						          });
						          done();
							}else{
								instance.confirmButtonLoading = false;
								this.$message({
						            type: 'warning',
						            message: res.message
						         });
						         done();
							}
						})		          
		            } else {
		              done();
		            }
		          }
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消补单'
		          });          
		        });				
			},
			//查询搜索
			getsearch(type){
				this.pagenunber= 1;
				if(type == 1){
					if(this.search == '' && (this.value1 == ''|| this.value2 == '') && this.orderSearch == '' && this.payOrderSearch == ''){
						this.$message.error('请选择日期或输入用户名或订单ID');
					}else{
						this.getPaymentLogList()
					}
					
				}else if(type == 2){				
					if(this.value3 == '' && this.value4 == '' ){
						this.$message.error('请选择日期');
					}else{
						this.getWithdrawalLogList()
					}					
				}				
			},
			
			//银行卡选择
			changeValue(value){
				for(var i = 0 ; i < this.bankCardList.length; i++){
					var cardNumb = this.bankCardList[i].bankCardId
					if(value === cardNumb){
						this.rulesForm.name = this.bankCardList[i].name;
						this.rulesForm.openBank = this.bankCardList[i].openBank;
					}
				}			
			},
			//表单提交验证
			submitForm(rulesForm) {
				this.$refs[rulesForm].validate((valid) => {
					if(valid) {
						this.doWithdrawal();						
					} else {
						return false;
					}
				});					
			},
			
			//保留两位小数  有BUG超过5位数就变NAN 暂停使用
			filterMoney(val) {
			    val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    } 
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }
			
			    return (((sign)?'':'-') + val + '.' + cents);
			},
			
			//监听提现弹窗，打开后调银行卡接口
			opendialog() {
			// 	this.withdrawalLines = this.appConfig.withdrawalLines
			// console.log(this.withdrawalLines)
				this.getBankCardList();
			},

			//提交提现表单
			doWithdrawal() {
				let par = {
					appId: this.appConfig.appId,
					bankCard: this.rulesForm.bankCardId,
					money: this.rulesForm.cashNumb,
//					toAccountMoney: this.cash,
					name: this.rulesForm.name,
					openBank: this.rulesForm.openBank,
				}
				api.doWithdrawal(par, (res) => {
					if(res.code == 0) {
						this.$message({
				          message: '提现申请成功',
				          type: 'success'
				        });
				    this.getWithdrawalLogList();
					this.getPaymentLogList();
					this.info();
					}else{
						this.$message.error(res.message);
					}
				})
				this.rulesForm.bankCardId = ''
				this.rulesForm.cashNumb= ''
//				this.cash= ''
				this.rulesForm.name= ''
				this.rulesForm.openBank= ''	
				this.pagenunber = 1
				this.dialogVisible = false;
			},

			//获取银行卡信息
			getBankCardList() {
				let par = {
					appId: this.appConfig.appId,
				}
				api.getChooseBankCardList(par, (res) => {
					if(res.code == 0) {
						this.bankCardList = res.data
					}
				})
			},

			//获取用户信息
			info() {
				let par = {
					appId: this.appConfig.appId,
				}
				api.getIndexInfo(par, (res) => {
					if(res.code == 0) {
						this.infolist = res.data
					}
				})
			},

			//获取充值金额记录
			getPaymentLogList(val) {
				this.pageInfo = ''
				this.WithdrawalLogList=""
				this.withdrawalAmount=""
				let par = {
					appId: this.appConfig.appId,
					pageNo: val|| this.pageNo,
					pageSize: this.pageSize,
					payStartTime: this.value1,
					payEndTime: this.value2,
					customerName: this.search,
					outsourcingOrderId:this.orderSearch,
					paySn:this.payOrderSearch,
					
				}
				api.getPaymentLogList(par, (res) => {
					if(res.code == 0) {
						this.PaymentLogList = res.data
						console.log(this.PaymentLogList)
						this.pageInfo = res.pageInfo 
						this.totalAmount= res.totalAmount						
							if(this.PaymentLogList.length == 0){							
								if(this.value1 != '' || this.search != '' || this.orderSearch != '' || this.paySn != ''){
									this.showNOSearchData = true
									this.noData = false
								}else {
									this.noData = true
									this.showNOSearchData = false
								}								
							}else{
								this.noData = false
								this.showNOSearchData = false
							}
					}
				})
			},

			//获取提取金额记录
			getWithdrawalLogList(val) {
				this.pageInfo2 = ''
				this.PaymentLogList=""
				this.totalAmount=""
				let par = {
					appId: this.appConfig.appId,
					pageNo: val|| this.pageNo2,
					pageSize: this.pageSize2,
					payStartTime: this.value3,
					payEndTime: this.value4,
				}
				api.getWithdrawalLogList(par, (res) => {
					if(res.code == 0) {
						this.WithdrawalLogList = res.data
						this.pageInfo2 = res.pageInfo
						this.withdrawalAmount = res.withdrawalAmount
						if(this.WithdrawalLogList.length == 0){	
								if(this.value3 != '' || this.value4 != ''){
									this.showNOSearchData = true
									this.noData = false
								}else{
									this.noData = true
									this.showNOSearchData = false
								}								
							}else{
								this.noData = false
								this.showNOSearchData = false
						}
					}
				})
			},
		


			//退出登录
			handleClose() {
				this.$confirm('确认退出？')
					.then(_ => {
						//清空缓存信息
						var pz = Object.assign({}, this.appConfig);
						pz.appId = '';
						this.setConfig(pz);
						//回到登录页面
						this.$router.replace({
							path: "/"
						});
					})
					.catch(_ => {});
			},

			record(index) {
				this.pagenunber= 1;
				this.value1 = ''
				this.value2 = ''
				this.value3 = ''
				this.value4 = ''
				this.search = ''
				this.orderSearch = ''
				this.payOrderSearch = ''
				this.recordshow = index
				this.noData = false
				this.showNOSearchData = false
				if(index == 1) {
					this.getPaymentLogList()
				}
				if(index == 2){
					this.getWithdrawalLogList()
					
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted() {
			this.info()
//			this.getWithdrawalLogList()
			this.getPaymentLogList()
			
		}
	}
</script>
<style lang="scss">
	@import '../../styles/styles.scss';
	.warrper {
		.cbody {
			width: 1320px;
			margin: 0 auto;
		}
		.head {
			height: 96px;
			background: #458bef;
			font-size: 0;
			h4 {
				display: inline-block;
				vertical-align: middle;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 96px;
			}
			p {
				float: right;
				// display: inline-block;
				vertical-align: middle;
				font-size: 18px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				line-height: 96px;
				cursor: pointer;
				span {
					display: inline-block;
					line-height: 1em;
					padding: 0 20px;
					border-left: 1px solid #fff;
				}
			}
		}
		.extract {
			display: block;
			width: 380px;
			height: 48px;
			background: rgba(69, 139, 239, 1);
			border-radius: 24px;
			margin: 50px auto;
		}
		.statistics {
			margin-top: 50px;
			font-size: 0;
		}
		.statiton {
			display: inline-block;
			vertical-align: middle;
			// width:319px;
			width: 254px;
			box-sizing:border-box;
			height: 198px;
			border: 1px solid rgba(229, 229, 229, 1);
			text-align: center;
			margin-right: 12px;
			&:last-child {
				margin-right: 0;
			}
			.imgbox {
				display: inline-block;
				/*height: 198px;*/
				margin-top: 60px;
				img {
					height: 25px;
					width: auto;
				}
				p {
					display: inline-block;
					vertical-align: top;
					font-size: 14px;
					font-family: MicrosoftYaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					text-align: left;
					margin-top: 3px;
					margin-left: 5px;
				}
				font-size:16px;
				font-family:MicrosoftYaHei;
				font-weight:400;
				color:rgba(51, 51, 51, 1);
			}
			input {
				height: 40px;
				line-height: 40px;
				color: #333333;
				text-indent: 1em;
				border: 1px solid #dcdfe6;
				border-radius: 4px;
			}
			.statitontext {
				margin-left: 18px;				
				h5 {
					font-size: 30px;
					font-family: MicrosoftYaHei;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					margin: 0;
					text-align: center;
				}
			}
			.spanTips{
				display: inline-block;
				padding: 5px;
				font-size: 12px;
				font-family: MicrosoftYaHei;
				vertical-align: bottom;
				margin-top: 20px;
			}
		}
		.record_title {
			height: 50px;
			line-height: 50px;
			border: 1px solid rgba(69, 139, 239, 1);
			font-size: 0;
			.recorditem {
				display: inline-block;
				width: 126px;
				text-align: center;
				font-size: 16px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				border-right: 1px solid rgba(69, 139, 239, 1);
				color: rgba(51, 51, 51, 1);
				background: #fff;
				cursor: pointer;
				&.activ,
				&:hover {
					background: #458BEF;
					color: #fff;
				}
			}
			p {
				float: right;
				font-size: 16px;
				font-family: MicrosoftYaHei;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				padding-right: 25px;
			}
		}
		.tra_3 {
			transition: all .3s;
			-moz-transition: all .3s;
			/* Firefox 4 */
			-webkit-transition: all .3s;
			/* Safari 和 Chrome */
			-o-transition: all .3s;
			/* Opera */
		}
		.record_centers {
			.selection {
				margin: 30px 0;
				
				.timebox {
					display: inline-block;
					.paytime {
						font-size: 16px;
						font-family: MicrosoftYaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						display: inline-block;
					}
				}
				.payOrderSearch{
					margin-left: 0 !important;
					margin-top: 20px; 
				}
				.payuser {
					display: inline-block;
					margin-left:30px;
					p {
						display: inline-block;
						font-size: 16px;
						font-family: MicrosoftYaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						display: inline-block;
					}
					.el-input {
						width:70%;
					}
					/*input {
						height: 40px;
						line-height: 40px;
						color: #333333;
						text-indent: 1em;
					}*/
				}
				.inquire {
					float: right;
					vertical-align: middle;
					width: 280px;
					height: 48px;
					background: rgba(69, 139, 239, 1);
					border: 1px solid rgba(69, 139, 239, 1);
					border-radius: 2px;
					transition: .1s;
					font-size: 18px;
					font-family: MicrosoftYaHei;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				
					&:hover {
						cursor: pointer;
						background: #66b1ff;
						border-color: #66b1ff;
						color: #fff;
					}
				}
			}
			.record_list {
			
				.record_list_title {
					font-size: 0;
					.cashRecord{
						width: 16.68% !important;
					}
					span {
						display: inline-block;
						width: 14.31%;
						height: 50px;
						text-align: center;
						line-height: 50px;
						box-sizing: border-box;
						border: 1px solid rgba(229, 229, 229, 1);
						margin-right: -1px;
						font-size: 16px;
						font-family: MicrosoftYaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}
				.record_item {
					font-size: 0;
					border: 1px solid rgba(229, 229, 229, 1);
					margin-top: -1px;
					height: 90px;
					width: 99.55%;
					display: flex;
				    align-items: center;
				    flex-direction: row;
				    /*justify-content: center*/
					.item_span{
						display: inline-block;
						width: 16.68%;
						word-break: break-word;
						word-break: break-all;
						/*height: 90px;*/
						text-align: center;
						/*line-height: 90px;*/
						box-sizing: border-box;
						margin-right: -1px;
						font-size: 16px;
						font-family: MicrosoftYaHei;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						padding:0 8px;
						.el-button--primary{
							margin-top: 4px;
						}
					}
				}
			}
		}
		.pagination {
			display: block;
			margin: 50px auto;
			.el-pagination {
				text-align: center;
			}
			.el-pagination.is-background .btn-next,
			.el-pagination.is-background .btn-prev,
			.el-pagination.is-background .el-pager li {
				border: 1px solid #E5E5E5;
				background: #fff;
			}
		}
		.el-dialog__wrapper {
			.el-dialog {
				height: 470px;
				border-radius: 10px;
				overflow: hidden;
				.el-dialog__header {
					height: 50px;
					line-height: 50px;
					padding: 0 40px;
					background: #458BEF;
					color: #FFFFFF;
					.el-dialog__title {
						color: inherit;
						font-size: 18px;
					}
					.el-dialog__headerbtn {
						top: 14px;
						.el-dialog__close {
							color: #FFFFFF;
							font-size: 24px;
						}
					}
				}
				.el-dialog__body {
					padding: 50px 20px;
					.el-input {
						width: auto;
					}
					.el-select {
						width: 274px;
					}
					.el-form {
						.el-form-item {
							.el-form-item__error {
								left: 30%
							}
						}
					}
					.demo-input-suffix {
						/*padding-bottom: 30px;*/
						.el-input__inner {
							font-size: 16px;
							color: #757575;
							font-family: 'MicrosoftYaHei';
						}
						.text {
							display: inline-block;
							width: 235px;
							text-align: right;
							font-size: 18px;
							font-family: 'MicrosoftYaHei';
							color: #333333;
						}
						input::-webkit-input-placeholder {
							/* WebKit, Blink, Edge */
							font-size: 16px;
							color: #757575;
							font-family: 'MicrosoftYaHei';
						}
						input:-moz-placeholder {
							/* Mozilla Firefox 4 to 18 */
							font-size: 16px;
							color: #757575;
							font-family: 'MicrosoftYaHei';
						}
						input::-moz-placeholder {
							/* Mozilla Firefox 19+ */
							color: #757575;
							font-size: 16px;
							font-family: 'MicrosoftYaHei';
						}
						input:-ms-input-placeholder {
							/* Internet Explorer 10-11 */
							color: #757575;
							font-size: 16px;
							font-family: 'MicrosoftYaHei';
						}
						.tips {
							margin-left: 16px;
							font-size: 16px;
							font-family: 'MicrosoftYaHei';
							color: #EC944D;
						}
					}
				}
				.cashTips {
					display: block;
					width: 100%;
					line-height: 30px;
					text-align: center;
					font-size: 16px;
					font-family: 'MicrosoftYaHei';
					color: #F13737;
					padding-top: 20px;
				}
				.el-dialog__footer {
					text-align: center;
					padding: 0;
					.el-button {
						width: 160px;
						height: 48px;
						font-size: 18px;
						font-family: 'MicrosoftYaHei';
						font-weight: 400;
						border-radius: 2px;
					}
					.el-button--default {
						color: #458BEF;
						border: 1px solid #458BEF;
					}
				}
			}
		}
		.el-button--primary {
			background-color: #458BEF;
		}
		.el-button--primary:focus,
		.el-button--primary:hover {
			background: #66b1ff;
			border-color: #66b1ff;
			color: #fff;
		}
	}
	/*没数据时提示*/
	.noData{
		width: 100%;
		margin-top: 20px;
		text-align: center;
		font-size: 16px;
		font-family: 'MicrosoftYaHei';
		color: #333333;
	}
	.nomargin{
		   	margin-top: 16px;
	}
	.noheight{
		height: 100px;
	}
</style>